const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const plugins = [
  new HtmlWebpackPlugin({
    template: './index.ejs',
  }),
  new MiniCssExtractPlugin({
    filename: 'css/[name].[contenthash].css',
    chunkFilename: '[id].[contenthash].css',
  }),
];

module.exports = {
  entry: path.resolve(__dirname, '../src/main.js'),

  output: {
    filename: 'js/[name].[contenthash].js',
    path: path.resolve(__dirname, '../dist'),
    clean: true,
    chunkFormat: 'array-push',
  },
  plugins,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  cache: {
    type: 'filesystem',
    name: `${process.env.NODE_ENV || 'development'}-cache`,
    compression: process.env.NODE_ENV === 'development' ? false : 'gzip',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      common: path.resolve(__dirname, '../src/common'),
    },
  },
};
